<template>
	<view class="invite_box">
		<view class="uni-swiper-msg">
			   <!-- <swiper class="swiper" vertical="true" autoplay="false" duration="500" interval="4000" >
				    <swiper-item v-for="(item, index) in msg" :key="index">
					      <view class="message_prompt_box">
						<image class="message_prompt" src="/static/img/mine_invite/message_prompt.png"></image>
						<image class="message_prompt_logo" :src="item.url"></image>
						<view class="message_prompt_content">
							{{item.username}}刚刚获得{{item.amount}}元推荐费
						</view>
					</view>
					    </swiper-item>
				   </swiper> -->
		</view>
		<view class="" style="height: 600px;width:100%;padding-top: 250px;">
			<swiper class="swiperBox" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			 :duration="duration" @change="getId">
				<swiper-item @tap="toDe(item)" v-for="(item,index) in jobLists" :key="index">
					<image style="width: 100%;height: 124px;position: absolute;top: 0;" :src="item.img_path? item.img_path:'https://static.cholink.com/recruit-staff/recruit-wx/banner2.png'"
					 mode=""></image>
					<view class="list-box">
						<view class="list">
							<view class="title-box">
								<view class="tit-l">{{item.recruit_job_title}}</view>
								<view class="tit-r">{{item.recruit_job_name}}</view>
							</view>
							<view class="money">{{item.salary}}</view>
							<view class="flex flex-wrap">
								<view class="tag" v-for="(tag, index) in item.tag_data" v-if="index < 3" :key="index">
									<view class="cu-tag light radius line-gray">
										{{ tag.tag_name || ''}}
									</view>
								</view>
							</view>
							<view class="address-box">
								<view class="address">
									{{item.city_address}}
								</view>
								<view class="line"></view>
								<view class="company">
									{{item.recruit_company_name}}
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="message_prompt_body">
				<image src="../../static/img/mine_invite/face_invite.png" mode="" @tap="show_ma"></image>
				<!-- <button @tap="show_ma"><image src="../../static/img/mine_invite/wx_invite.png"   mode=""></image></button> -->
				<button open-type="share"><image src="../../static/img/mine_invite/wx_invite.png" mode=""></image></button>
			</view>
			<view class="get_invite_rules" @tap="gotolists">
				查看邀请记录 >
			</view>
		</view>

		<view v-if="showerweima">
			<showErweima :current_data="current_data" />
		</view>
		<view class="active_rule" @click="$refs.popup.open()">
			活动规则
		</view>

		<uni-popup :show="false" type="center" ref="popup" :maskClick="false">
			<view style="background-color: #FFFFFF;width: 80%;margin: auto;font-size: 15px;padding: 36px 20px 32px 20px;border-radius: 16px;">
				<view style="line-height: 25px;margin-bottom: 16px;">
					<view class="rule-title">———— 活动规则 ————</view>
					<view class="t-box">
						<view class="round"></view>
						<view class="r-title">什么职位支持“拿推荐费”？</view>
					</view>
					<view style="margin-top: 8px;margin-bottom: 16px;">
						拿推荐费专区的职位或者职位详情页的奖 励补贴里有“邀请有礼”标示的职位都支持。
					</view>
					<view class="t-box">
						<view class="round"></view>
						<view class="r-title">“推荐费”怎么领取？</view>
					</view>
					<view style="margin-top: 8px;margin-bottom: 16px;">
						推荐好友入职平台的职位，满足规定天数后平台将进行审核。若审核通过，经纪人线下返费给您；若审核未通过，可联系经纪人了解原因。
					</view>
					<view class="t-box">
						<view class="round"></view>
						<view class="r-title">获得推荐费流程示意图</view>
					</view>
				</view>
				<view style="margin-top: 8px;">
					<image style="height: 160px;" src="https://static.cholink.com/recruit-staff/flow.png" mode=""></image>
				</view>
				<view @click="$refs.popup.close()" style="height: 50px;width: 90%;border-radius: 25px;background-color: #FA9D3B;color: #FFFFFF;text-align: center;line-height: 50px;margin: 37px auto 0;font-size: 17px;">
					我知道了
				</view>
			</view>
		</uni-popup>
		<uni-popup :show="false" type="center" ref="share_popup" :maskClick="false">
			<view style="background-color: #FFFFFF;width:320px;font-size: 15px;padding: 36px 40px 32px 40px;border-radius: 16px;display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<view>
					<image :src="avatar_logo" mode="" style="width: 104px;height: 104px;border-radius: 52px;margin-top: -100px;"></image>
				</view>
				<view style="margin: 20px 0 ; font-size: 18px;">{{tel}}</view>
				<view>
					<image :src="codeData" mode="" style="width: 140px;height: 140px;border-radius: 70px;"></image>
				</view>
				<view style="margin-top: 20px;">微信扫一扫</view>
				<view class="close" @tap="$refs.share_popup.close()">
				</view>
			</view>
<!-- 			<view style="background-color: #FFFFFF;width: 320px;height: 306px;border-radius: 16px;">
				<image src="../../static/img/poster/unstart.png" mode="" style="width:140px;height: 140px;display: block;margin: 0 auto"></image>
				<view style="text-align: center;padding-top:16px;font-size: 16px;">活动暂未开放，敬请期待~</view>
				<view @click="$refs.share_popup.close()" style="height: 50px;width: 256px;border-radius: 25px;background-color: #FA9D3B;color: #FFFFFF;text-align: center;line-height: 50px;margin: 37px auto 0;font-size: 17px;">
					我知道了
				</view>
			</view> -->
		</uni-popup>
		<view>
<!-- 			<image src="../../static/img/poster/unstart.png" mode="" style="width: 200px;height: 200px;display: block;margin: 0 auto"></image>
			<view style="text-align: center;padding-top:16px;font-size: 16px;">活动暂未开放，敬请期待~</view> -->
		</view>
	</view>
</template>

<script>
	const Page = require('../../utils/mtj-wx-sdk.js').Page;
	// import autoSwiper from "./components/autoSwiper";
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import showErweima from "./components/showerweima.vue"
	import {
		get_back_balancelists,
		get_notice,
		inviteface_list,
		getCode
	} from "../../api/user.js"
	export default {
		components: {
			showErweima
		},
		data() {
			return {
				msg: [],
				info: {
					progress: 32,
				},
				showerweima: false,
				token: "",
				isToken: false,
				btnnum: 0,
				items: ["在路上", "待到账", "已获得"],
				count: "",
				zhiweiid: '',
				on_way_list: [],
				hold_list: [],
				get_list: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				jobLists: [],
				current_id: 1,
				current_data: "",
				tel:'',
				username:'',
				avatar_logo:'',
				codeData:'',

			}
		},
		onLoad() {
			this.face_list()
		},
		onShow(){
			this.face_list()
		},
		onShareAppMessage(res) {
			let scene = `${this.jobLists[this.current_id-1].recruit_user_id}&${this.jobLists[this.current_id-1].recruit_job_id}`
			// let scene = {
			// 	recruit_user_id:this.jobLists[this.current_id-1].recruit_user_id,
			// 	recruit_job_id:this.jobLists[this.current_id-1].recruit_job_id
			// }
			console.log(scene,5555)
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.jobLists[this.current_id-1].recruit_job_title,
				// desc: "分享",
				// type:1,
				imageUrl:this.jobLists[this.current_id-1].img_path,
				path: '/pages/detail/detail?scene='+encodeURIComponent(scene),
				success: res => {
					console.log(res)
				},
				fail: err => {
					console.log(err)
				}
		
			}
		},
		methods: {
			getId(e) {
				this.current_id = e.detail.current
			},
			change(e) {
				this.count = e
				this.btnnum = e
			},
			show_ma() {
				this.$refs.share_popup.open()
				this.autoplay = !this.autoplay
				console.log(this.jobLists[this.current_id-1])
				getCode({
					path:'pages/detail/detail',
					user_id:Number(this.jobLists[this.current_id-1].recruit_user_id),
					job_id:this.jobLists[this.current_id-1].recruit_job_id
				}).then(res=>{
					if(res.data) {
						// console.log(res.data,666)
						let code  = res.data
						let src = `data:image/jpg;base64,${code}`;
						const fsm = wx.getFileSystemManager();  // 获取文件管理器
						code = code .replace(/\ +/g, ""); //去掉空格方法
						code = code .replace(/[\r\n]/g, "");
						
						const buffer = wx.base64ToArrayBuffer(code );  //  将 base64 字符串转成 ArrayBuffer 对象
						const fileName = wx.env.USER_DATA_PATH + '/share_img.png';  // 文件系统中的用户目录路径 （本地路径）
						/**
						* @param fileName: 文件路径
						* @param buffer : 要写入的文本或二进制数据
						* @param binary: 指定写入文件的字符编码
						*/
						fsm.writeFileSync(fileName, buffer, 'binary');  // 写入文件， 同步方法
						
						// console.log(fileName);  // 写入成功后就可以访问到该图片路径了
						this.codeData = fileName
					}
				})

			},
			face_list() {
				inviteface_list({}).then(res => {
					this.jobLists = res.data
				})
			},
			clone(obj) { return JSON.parse(JSON.stringify(obj)); },
		
			toDe(events) {
				
				// setTimeout(() => {
					let eventss = this.clone(events)
					// js url安全编码
					eventss.img_path = escape(eventss.img_path)
					var event = JSON.stringify(eventss)
					uni.navigateTo({
						url: '/pages/detail/detail?data=' + event
					})
				// },500)
			},
			gotolists() {
				uni.navigateTo({
					url: '/pages/invite/invitelist'
				})
			},
			getlists() {
				if (this.isToken) {
					get_back_balancelists({
						step: 0
					}).then(res => {
						this.on_way_list = res.data
					}),
					get_back_balancelists({
						step: 1
					}).then(res => {
						console.log(res)
						this.hold_list = res.data
					}),
					get_back_balancelists({
						step: 2
					}).then(res => {
						console.log(res)
						this.get_list = res.data
					}),
					get_notice().then(res => {
						console.log(res)
						this.msg = res.data
					})
				} else {
					uni.showModal({
						title: "职小侠提醒",
						content: '用户已登出，请重新登录！',
						success: (res) => {
							if (res.confirm) {
								// let showT = true
								uni.navigateTo({
									url: "/pages/login/index"
								});
							}
						}
					})
					return;
				}
			},
			shareFace(e) {
				this.autoplay = !this.autoplay
			}
		},
		mounted() {
			this.getlists()
			this.tel = uni.getStorageSync("phone").mobilephone
			this.username = uni.getStorageSync("username").data
			this.avatar_logo = uni.getStorageSync("avatar").data
		},
		onShow() {
			this.token = uni.getStorageSync('authorization')
			if (this.token) {
				this.isToken = true
			} else {
				this.isToken = false
			}

		},
		filters: {
			getStatus(val) {
				if (val == "0") {
					return "产生意向"
				} else if (val == "1") {
					return "预约成功"
				} else if (val == "2") {
					return "安排面试"
				} else if (val == "3") {
					return "入职成功"
				} else if (val == "4") {
					return "入职失败"
				}
			},
			back_free_step(val) {
				if (val == "0") {
					return "待返费"
				} else if (val == "1") {
					return "返费中"
				} else if (val == "2") {
					return "返费成功"
				} else if (val == "3") {
					return "返费失败"
				}
			}
		}
	}
</script>

<style>
	.t-box{
		display: flex;
		justify-content: left;
		align-items: center;
	}
	.round{
		width: 10px;
		height: 10px;
		background: #FFFFFF;
		border: 2px solid #FA9D3B;
		border-radius: 50%;
	}
	.r-title{
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 21px;
		color: #666666;
		margin-left: 8px;
	}
	.rule-title{
		font-weight: bold;
		font-size: 17px;
		text-align: center;
		color:#FA9D3B ;
	}
	page{
		background-color: #FFFFFF !important;
	}
	.uni-swiper-msg {
		flex-wrap: nowrap !important;
		display: flex !important;
		width: 100%;
	}

	.uni-swiper-msg-icon {
		width: 25px !important;
		margin-right: 10px !important;
	}

	.uni-swiper-msg-icon image {
		width: 100% !important;
		flex-shrink: 0 !important;
	}

	.swiper {
		font-size: 15px;
		width: 100% !important;
		height: 32px !important;
		line-height: 32px;
		width: 100%;
		
	}

	.swiper swiper-item {
		line-height: 25px !important;
		font-size: 15px !important;
		color: #F5283A !important;
		font-weight: 700 !important;
	}

	.swiper view {
		overflow: hidden !important;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
	}


	/* .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} */
	.invite_box {
		/* margin-top: 32px; */
		width: 100%;
		height: 905px;
		background: url(https://static.cholink.com/recruit-staff/recruit-wx/invite_bg_20200107.png) no-repeat center center;
		background-size: 100% 100%;

	}

	.message_prompt_box {
		width: 100%;
		/* height: 32px; */
		line-height: 32px !important;
		/* position: fixed;
		left: 0;
		top: 44px; */
		display: flex;
		padding: 3px 24px;
		align-items: center;
		/* justify-content: center; */
		background: #fdceb6;

	}

	.message_prompt {
		width: 20px;
		height: 20px;

	}

	.message_prompt_logo {
		width: 24px;
		height: 24px;
		background: green;
		margin: 0 8px 0 12px;
		border: 1px solid #707070;
		border-radius: 50%;
		opacity: 1;
	}

	.message_prompt_content {
		/* width: 207px; */
		height: 21px;
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 21px;
		color: #F58630;
		opacity: 1;

	}

	.message_prompt_body {
		width: 100%;
		height: 50px;
		margin-top: 41px;
		position: relative;
		/* padding: 0 27px; */
		/* display: flex;
		align-items: center;
		justify-content: center; */

	}
	.message_prompt_body > image, .message_prompt_body button {
		height: 50px;
		width: 150px;
		position: absolute;
		/* margin-left: 27px; */
	}
	.message_prompt_body button{
		height: 50px;
		background-color: transparent;
	}
	.message_prompt_body button image{
		height: 50px;
		width: 150px;
	}
	.message_prompt_body > image {
		left: 27px;
	}

	.message_prompt_body button {
		padding: 0 !important;
		right: 27px;
		border-radius: 40px !important;
	}

	.active_rule {
		position: absolute;
		top: 57px;
		right: 0;
		width: 26px;
		height: 100px;
		background: linear-gradient(-90deg, #FEB541, #FC7B09);
		border-radius: 6px 0px 0px 6px;
		color: #FFFFFF;
		font-size: 15px;
		text-align: center;
		line-height: 26px;
	}

	.mine_mark {
		width: 95%;
		height: 520px;
		margin: 44px auto 0;
		padding-top: 52px;
		background-image: url(https://static.cholink.com/recruit-staff/recruit-wx/mine_mark.png);
		background-size: 100% 100%;
		;
	}

	.endBOX {
		width: 90%;
		height: 90%;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 18px 0px rgba(249, 210, 94, 0.6);
		border-radius: 10px;
		overflow: auto;
	}

	.end-title {
		display: flex;
		justify-content: center;
		align-items: center;
		/* text-align: center; */
		height: 38px;
		line-height: 35px;
		font-size: 14px;
		color: #333333;
		background-color: #F9D25E;

	}

	.end-title view {
		height: 100%;
		flex: 1;
		font-size: 16px;
		font-family: Source Han Sans CN;
		text-align: center;
		border-radius: 5px 5px 0 0;
		background-color: #F9D25E;
	}

	.btna {
		color: #FC810E;
		background-color: #FFFFFF !important;
	}

	.peopleMessage {
		display: flex;
		height: 74px;
		width: 100%;
		position: relative;
		border-bottom: 1px solid #EEEEEE;
		/* padding: 16px 9px; */

	}

	.content_one {
		margin: auto 0;

	}

	.strip {
		/* 父元素相对定位 */
		position: relative;
		width: 60px;
		height: 6px;
		color: rgba(80, 80, 80, 1);
		background-color: #fcecd2;
		border-radius: 2px;
		font-size: 14px;
		margin-top: -10px;
		margin-left: 40px;
		text-align: center;
	}

	.blue {
		height: 6px;
		color: rgba(80, 80, 80, 1);
		background-color: #ff882a;
		border-radius: 4px;
		font-size: 14px;
		/* line-height: 150%; */
		text-align: center;
	}

	.proImg {
		width: 16px;
		height: 16px;
		/* 子元素绝对定位   */
		position: absolute;
		/* 定位方向：属性值 */
		top: -6px
	}

	.close:hover {
		cursor: pointer;
	}

	.close {
		border: 2px solid #FFFFFF;
		color: white;
		border-radius: 20px;
		line-height: 30px;
		text-align: center;
		height: 30px;
		width: 30px;
		font-size: 18px;
		padding: 1px;
		position: absolute;
		/* right: 50%; */
		/* translateX:50% ; */
		bottom: -45px;
		/* opacity:0.2; */
	}

	.close::before {
		content: "\2716";
		color: #FFFFFF;
	}

	.block {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 17px;
		color: #333333;
		font-weight: bold;
	}

	.block image {
		width: 200px;
		height: 200px;
	}

	.type_box {
		background-color: #FFFFFF;
		padding-left: 16px;
		display: flex;
		padding: 14px 16px
	}

	.type_box view {
		width: 30px;
		height: 25px;
		/* border-radius: 12px; */
		text-align: center;
		font-weight: 400;
		font-size: 15px;
		color: #999999;
		line-height: 25px;
	}

	.type_box view:nth-child(2) {
		margin-left: 17px;
	}

	.type_box .is_active {
		/* background-color: #1089FF; */
		color: #1089FF;
	}

	.list-box {
		width: 100%;
		padding: 16px;
		position: absolute;
		bottom: 0;
		/* margin-top: 124px; */
		/* border-bottom: 1px solid #EEEEEE; */
	}

	.list-box .list {
		margin-bottom: 20px;
		border-bottom: 1px solid #EEEEEE;
	}

	.list-box view {
		margin-bottom: 5px;
	}

	.flex-wrap view {
		margin-right: 5px;
		font-size: 12px;
	}

	.tagstyle {
		height: 18px;
		border-radius: 4px;
		/* border:1px solid rgba(232,232,232,1); */
	}

	.cu-tag {
		background-color: #F5F5F5;
	}

	.cu-tag::after {
		border: none !important;
	}

	.title-box {
		display: flex;
	}

	.tit-l {
		width: 70%;
		color: #444444;
		font-size: 17px;
		font-weight: blod;
	}

	.tit-r {
		margin-left: auto;
		font-size: 15px;
		color: #999999;
	}

	.money {
		color: #07C160;
		font-size: 15px;
		font-weight: blod;
	}

	.address-box {
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #999999;
	}
	.address{
		overflow: hidden;
		height: 17px;
	}
	.line {
		width: 2px;
		height: 10px;
		background-color: #DDDDDD;
		margin-left: 10px;
	}

	.company {
		margin-left: 10px;
		font-size: 13px;
		color: #999999;
		overflow: hidden;
		height: 17px;
	}

	.swiperBox {
		height: 288px;
		width: 90%;
		border-radius: 10px;
		background-color: #FFFFFF;
		margin: 0 auto;

		/* display: flex;
		flex-direction: column;
		justify-content: space-around; */
		position: relative;
	}

	.get_invite_rules {
		background-color: #FA9D3B;
		color: #FFFFFF;
		border-radius: 15px;
		width: 154px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		margin:  0 auto;
		margin-top: 50px;
	}
</style>
